<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>nodom-example start</title>
	</head>

	<body>
    </body>
	<script type='module'>
		import{Nodom,Module} from '/dist/nodom.esm.min.js'
        
        class M1 extends Module{
            template(props){
                return `
                    <button >${props.title}</button>
                `
            }
        }

       class MMain extends Module{
            modules=[M1];
			/**
			 * 模版函数
			 */
			template(){
                return `
				    <div>
                        <M1 title='button1' e-click='click1'/>
                        <M1 title='button2' e-click='click2' x-show={{show2}}/>
                        <M1 title='button3' e-click='click3'/>
                    </div>
				`
			}

			/**
			 * 数据函数
			 */
			data(){
				return{
					show2:false
				}
			}	

			click1(){
                this.model.show2 = true;
            }
            click2(){
                this.model.show2 = false;
            }
       	}
    	Nodom.app(MMain);
	</script>
</html>
